#slide {
    position: relative;
    height: 50vh;

    .slide_img {
        opacity: 1;
        width: 100%;
        height: 50vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::before {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(48, 48, 48, 0.9);
            content: '';
        }

        img {
            object-fit: fill;
            opacity: .5;
            height: 100%;
            width: 100%;

        }
    }

    .slide_content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        color: #fff;
        display: flex;
        align-items: center;
        flex-direction: column;

        h1 {
            font-size: 6rem;
        }

        .a {
            font-size: 1.6rem;

            a {
                color: #fff;

                &:hover {
                    text-decoration: underline;
                }

            }

            span:nth-child(2) {
                font-size: 2rem;
                margin: 0 5px;
                line-height: 0;
            }

        }
    }
    @media screen and (max-width:510px) {
        .slide_content {
            h1{
                font-size: 3rem;
            }
            .a{
                font-size: 1.6rem;
            }
        }
    }
}

#col-4-section {
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;

        .titles {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 40px;
            margin-bottom: 60px;

            h1 {
                width: auto;
                font-size: 5rem;
                line-height: 80px;
                color: #000;
                border-bottom: 2px solid #ed1d24;
            }

            p {
                font-size: 2rem;
                color: #717376;
                margin-top: 20px;
            }
        }

        .col {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            width: 89%;

            .row {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 30px;
                padding-bottom: 4rem;
                width: 50%;
                border-bottom: 1px solid #edebeb;

                &:nth-child(2n+1) {
                    border-right: 1px solid #edebeb;
                }

                div {
                    width: 100px;
                    height: 100px;
                    background-color: #f9f9f9;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    span {
                        color: #ed1d24;
                        font-size: 6rem;
                    }
                }

                h2 {
                    color: #4f4d4d;
                    font-size: 3rem;
                }

                p {
                    width: 80%;
                    font-size: 2rem;
                    text-align: center;
                    color: #868686;
                }

            }
        }

        @media screen and(max-width:786px) {
            .col {
                flex-wrap: nowrap;
                flex-direction: column;
                align-items: center;

                .row {
                    width: 100%;
                    border: 0;
                    &:nth-child(2n+1) {
                        border: 0;
                    }

                    h2 {
                        font-size: 2.4rem;
                    }
                }
            }
        }
    }
}
#col-8-section {

    background: linear-gradient(to bottom, rgba(32, 32, 86, .9), rgba(00, 00, 00, .5)), url('../image/5.jpg') no-repeat center center;
    background-size: auto 100%;
    position: relative;
    height: 50vh;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 80px;

    .row {
        width: 30%;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
            font-size: 8rem;

            color: #ed1d24;

        }

        .che {
            transform: scaleX(1.2);
        }

        .sz {
            font-size: 4rem;
            color: white;
            margin-top: -14px;
        }

        p {
            font-size: 3rem;
            color: #6d6e73;
        }
    }
}
@media screen and (max-width:786px) {
    #col-8-section {
        flex-direction: column;
        height: 70vh;
        align-items: center;

        .row {
            height: 10vh;

            span {
                font-size: 7rem;
            }

            .sz {
                font-size: 3rem;
                margin-top: -14px;
            }

            p {
                font-size: 1.5rem;

            }
        }
    }

}
#col-10-section {
    .container {
        .col {
            width: 95%;
            margin: 0 auto;
            display: flex;
            justify-content: space-evenly;
            margin-top: 90px;
            margin-bottom: 60px;
            flex-wrap: wrap;

            .row {
                flex-direction: column;
                border: 1px solid #ed1d24;
                height: 70vh;
                width: 30%;
                border-radius: 2px;
                transition: all .5s;
                display: flex;

                &:hover {
                    transform: scale(1.1);
                }

                h1 {
                    color: #ed1d24;
                }

                h2 {
                    color: #4a4848;
                    font-weight: bold;
                }

                .contes {

                    .conte {

                        .duigou {
                            color: #f0454b;
                        }

                        p {
                            border-bottom: 1px solid #e3e3e4;
                        }
                    }
                }

                .btn:hover {
                    background-color: transparent;
                    text-decoration: underline;
                    color: #f0454b;
                }
            }

            .break {
                width: 30%;
                height: 75vh;
                background-color: #2b2b2d;
                margin-top: -5vh;
                border-radius: 2px;
                transition: all .5s;

                &:hover {
                    transform: scale(1.1);
                }

                h1 {
                    color: #d7d7d7;
                    text-align: center;
                }

                h2 {
                    color: #ffffff;
                    font-weight: bold;
                    text-align: center;
                }

                .contes {

                    .conte {

                        .duigou {
                            color: #fff;
                        }

                        p {
                            color: white;
                            border-bottom: 1px solid #a0a0a1;
                        }
                    }
                }

                .btn {
                    &:hover {
                        background-color: transparent;
                        text-decoration: underline;
                        color: #fff;
                    }

                    border: 1px solid #fff;

                }
            }

            h1 {
                font-size: 3rem;
                margin: 20px auto 0;
            }

            h2 {
                font-size: 6rem;
                margin: 0px auto 0;
            }

            .contes {
                margin: -10px 10% 0 10%;

                .conte {
                    display: flex;
                    margin-top: 10px;

                    .duigou {
                        width: 20px;
                        height: 20px;
                        border-radius: 4px;
                        border: 1px solid #f0454b;
                        text-align: center;
                        font-size: 0.8rem;
                        line-height: 23px;
                    }

                    p {
                        width: 100%;
                        text-align: center;
                        line-height: 20px;
                        height: 30px;
                    }
                }
            }

            .btn {
                width: 100px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.6rem;
                margin: 30px auto 0;
                background-color: #ed1d24;
                color: white;
                transition: all .5s;


            }
        }

        @media screen and (max-width:940px) {
            .col {
                justify-content: space-between;

                .row {
                    width: 48%;
                    margin-top: 40px;

                }

                .break {
                    width: 48%;
                    margin-top: 40px;
                }
            }

        }

        @media screen and (max-width:786px) {
            .col {

                .row {
                    width: 100%;
                }

                .break {
                    width: 100%;
                }
            }

        }
        @media screen and(max-width:415px) {
            .col {
                margin-top: 10px;

                .row {
                    margin-left: 0;
                }

            }
        }
    }
}